<template>
    <div>
        <!-- <div class="t_choosenumbox" @click="openchoose" >
            <div v-if="endchoosenum==''" style="color: #D4D7DE;" >选择中意的号码</div>
            <div v-else style="color: #404247;">已选号码：<span style="color: #005AFF;">{{ endchoosenum }}</span></div>
            >
        </div> -->
        <!-- 弹窗 -->
        <!-- <div class="t_window_box" :class="{'t_window_box_close':isclosewindow,'t_window_box_open':isopenwindow}" @click="closewindow"> -->
            <div class="t_inner_box" >
                <!-- <div class="t_inner_top">
                    <div @click="upnum" style="font-size: 18px;color: #003EFF;">
                        < 确定选择
                    </div>
                    <div v-if="nowchoosenum!=''" style="font-size: 15px;color: #7B7B7B;">
                        已选：{{ nowchoosenum }}
                    </div>
                </div> -->
                <div style="padding: 4vw;">
                    <div class="t_search_all">
                        <div v-if="take_number==1" class="flexc" @click="show2 = true" style=" position: relative;margin-bottom: 10px;">
                            <div style=" color: rgb(120, 125, 133); font-size: 0.28rem;">所在地区</div>
                            <div class="where" style="line-height: 44px; font-size: 14px; padding-left: 16px;">{{shengshiqu}}
                                <van-icon name="arrow" size="14" style="position: absolute; top: 0px; line-height:44px; right:0;" />
                            </div>
                        </div>
                        <div class="t_search_box">
                            <el-input v-model="shuzi" style="width: 250px;" placeholder="输入您喜欢的数字"></el-input>
                            <div @click="shaixuanhao(shuzi)" class="t_search_btn">搜索</div>
                        </div>
                        <div class="t_liang_box">
							<div @click="choosetag(index,item)" v-for="(item,index) in lianglist" :key="index" class="t_liang_tag" :class="{'t_liang_tag_lei':nowchoosetag==index.toString()}">{{item.rule_name}}</div>
						</div>
                        <van-checkbox-group v-model="choosesend" @change="checkfoutboxChange" style="display: flex;align-items: center;flex-wrap: wrap;">
							<van-checkbox checked-color="#ff4021" v-for="(item,index) in btnsear" :key="index" :name="item.rule_name" ><span style="color: #2D3038;">{{item.rule_name}}</span></van-checkbox>
						</van-checkbox-group>
                    </div>
                </div>
                
                <div class="t_num_list">
                    <div  v-for="(item,index) in numlist" :key="index" class="t_num" @click="upnum(item)">
                        <div style="display: flex;justify-content: center;" >
                            <div>{{ item.mobile[0] }}</div>
                            <div style="color: #ff0000;">{{ item.mobile[1] }}</div>
                            <div>{{ item.mobile[2] }}</div>
                        </div>
                        <!-- <div  style="font-size: 16px;color: #9946FF;font-weight: normal;text-align: right;padding-right: 5px;box-sizing: border-box;">立即领取</div> -->
                        <div style="display: flex;justify-content: space-around;font-size:12px;align-items: center;margin-top: 3px;">
								<div   style="color:#9d834e;font-weight:600;">
									立即领取
								</div>
								<div v-if="item.remark"  style="color:#fc0742;background-color: #fcdece;font-size: 12px;padding: 2px 6px;border-radius: 20px;">
								   {{item.remark}}
								</div>
							</div>
                    </div>
                </div>
                <div class="t_changepage_box" >
                    <div @click="prepage" 
                    v-if="pagenum!=1"  class="t_changepage">上一页</div>
                    <div @click="nextpage" 
                    v-if="numlist.length==20" class="t_changepage">下一页</div>
                </div>
                <div>
                    <div class="t_change" @click="repnum">
                        换一批
                    </div>
                    <!-- <div v-if="take_number==1" class="t_tips">号码归属地{{ this.address_province }}{{ this.address_city }}</div> -->
                </div>
            </div>
        <!-- </div> -->
        <van-popup v-model="show2" position="bottom">
            <van-area :area-list="areaList" :columns-placeholder="['请选择', '请选择']" 
            :value="nowcitycode"
            @confirm="queren" @cancel="quxiao" />
        </van-popup>
    </div>
</template>
<script>
export default {
  name: 'xuanhao',
  props: ['gth_page_id','take_number','pick_number_rules'],
  data(){
    return {
        
        nowchoosenum:'',
        nowchoosenumkey:null,
        // isclosewindow:false,
        // isopenwindow:false,
        numlist:[],//号码
        overlist:{},//多余数据
        endchoosenum:'',
        lianglist:'',
        nowchoosetag:0,
        nowchoosetagitem:{},
        shuzi:'',
        shengshiqu: "点击选择所在地区",
        show2:false,
        areaList:{},
        address_province:'',
        address_city:'',
        address_district:'',
        pagenum:1,
        nowcitycode:'',
        btnsear:[],
        choosesend:[],
        api_type:0,
    }
  },
  async created() {

      await axios.get("https://static.91haoka.cn/areanew.json")
          .then(async response=> {
              this.areaList = {
                city_list:{},
                province_list:{}
              }

            for (let i in response.data) {
                if(i=='city_list'){
                    this.areaList.city_list = response.data[i]
                }
                if(i=='province_list'){
                    this.areaList.province_list = response.data[i]
                }
            }
            console.log('地区')
            console.log(this.areaList)

            //当前省市 
            if(this.take_number==1){
                var sheng = sessionStorage.getItem('sheng')
                var shi = sessionStorage.getItem('shi')

                for(let i in this.areaList.city_list){
                    if(this.areaList.city_list[i]==shi){
                        
                        this.nowcitycode = i
                        this.address_province = sheng
                        this.address_city = shi
                        this.shengshiqu = this.address_province + '  ' + this.address_city 
                    }
                }
            }
            
                await axios.get(`/api/pick/number`,{
                    params: {
                        gth_page_id: this.gth_page_id, //敢探号商品id
						api_type: 1, //接口类型:0=原选号接口,1=号池选号-获取省市,2=号池选号-查号
                    }
							
						}).then(res => {
							console.log('res1111', res)
							if (res.data.msg.code == 0) {
								this.api_type=2
								this.resCode = true
								let resData = res.data.data
								let cityData = []
								res.data.data.forEach(item => {
									console.log('item', item)
									if (item.cities) {
										cityData = cityData.concat(item.cities)
									}
								})
								this.areaList = {
									city_list: {},
									province_list: {}
								}
								for (let i in response.data) {
									if (i == 'city_list') {
										let city_list = response.data[i]
										console.log('cityData', cityData)
										for (let item in city_list) {
											if (cityData.findIndex(key => key.city === city_list[item]) != -1) {
												this.areaList.city_list[item] = city_list[item]
											}
										}
									}
									if (i == 'province_list') {
										let province_list = response.data[i]
										for (let item in province_list) {
											if (resData.findIndex(key => key.province === province_list[item]) != -1) {
												this.areaList.province_list[item] = province_list[item]
											}
										}
									}
								}
							} else {
								this.api_type=0
								this.resCode = false
								this.areaList = {
									city_list: {},
									province_list: {}
								}

								for (let i in response.data) {
									if (i == 'city_list') {
										this.areaList.city_list = response.data[i]
									}
									if (i == 'province_list') {
										this.areaList.province_list = response.data[i]
									}
								}
							}
						})
          })

          

           

        if(this.pick_number_rules!=''){
            // this.lianglist = this.sortFun(this.pick_number_rules,'sort','desc')
            // this.nowchoosetagitem = this.sortFun(this.pick_number_rules,'sort','desc')[0]
            var liang = []
            var ersearch = []
            for(var x = 0;x<this.pick_number_rules.length;x++){
                if(this.pick_number_rules[x].rule_key=='second_search'){
                ersearch.push(this.pick_number_rules[x])
                }else{
                liang.push(this.pick_number_rules[x])
                }
            }

            this.lianglist = this.sortFun(liang,'sort','desc')
            this.nowchoosetagitem = this.sortFun(liang,'sort','desc')[0]
            this.nowchoosetag = '0'
            
            this.btnsear = ersearch
        }
       
        //打开选号
        this.openchoose()

  },
  mounted(){
   
  },
  methods:{
    //打开选号
    openchoose(){

        if(this.take_number==1){
            if(this.address_province==''){
                vant.Toast('请先选择省市区');
                return
            }
        }
        
        // this.isclosewindow = false
        // this.isopenwindow = true
        console.log('打开弹窗')
        console.log(this.address_province)
        console.log(this.address_city)
        console.log(this.address_district)
        console.log(this.gth_page_id)
        console.log(this.take_number)


        //获取列表
        this.getlist()
    },
    //获取列表
    getlist(){
        this.numlist = []
        this.overlist = {}
        this.nowchoosenum = ''
        this.nowchoosenumkey = null
        let obj = {
            gth_page_id:this.gth_page_id,
            address_province:this.address_province,
            address_city:this.address_city,
            address_district:this.address_district,
            moni:3,
            page:this.pagenum,
            search_name:this.shuzi,
            api_type: this.api_type,
            city:this.address_city
        }

        if(this.nowchoosetagitem!=''){
            obj[this.nowchoosetagitem.rule_key] = this.nowchoosetagitem.rule_name
            // console.log(key,value)
            console.log(obj)
        }

          // 不带4
   
        if(this.choosesend.length>0){
            obj.data['second_search'] = this.choosesend.toString()
        }

        axios.get('/api/pick/number',{
            params:obj
        }).then((response)=>{
        	if (response.data.msg.code == 0) {
                console.log('列表数据')
                console.log(response.data.data)
                
                

                this.numlist = this.firststro(response.data.data)

                console.log('==============处理列表数据==========')
                console.log(this.numlist)
                console.log(this.overlist)
                console.log('==============处理列表数据==========')
                
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })


        
        
        

    },
    //选择号码
    // choosenum(item){
    //     this.nowchoosenum = item.value
    //     this.nowchoosenumkey = item.key
    // },
    //换一批
    repnum(){
        console.log('换一批')
        this.pagenum = 1
        this.getlist()
    },
    //确定
    upnum(item){
        
        this.nowchoosenum =  this.joinarr(item.mobile)
        var newitem = JSON.parse(JSON.stringify(item))
        newitem.mobile = this.nowchoosenum
        this.$emit('upnum',newitem)
        // this.endchoosenum = this.nowchoosenum
        console.log(newitem)
        // this.nowchoosenumkey = item.key
        // if(this.nowchoosenum==''){
        //     vant.Toast('请选择号码');
        //     return
        // }
        // console.log('确定号码')
        // var newdata = JSON.parse(JSON.stringify(this.overlist));
        // newdata['mobile_code'] = this.nowchoosenumkey
        // var form={
        //     gth_page_id:this.gth_page_id,
        //     mobile:this.nowchoosenum,
        //     data:newdata,
        // }
        // console.log(form)

        // axios.post('/api/take/number',form).then((response)=>{
        // 	if (response.data.msg.code == 0) {
        //         this.$emit('upnum',this.nowchoosenum)
        //         this.endchoosenum = this.nowchoosenum
        //         //关闭
        //         // this.closewindow()
        //         vant.Toast('预占成功');
        // 	} else {
        // 		vant.Toast(response.data.msg.info);
        // 	}
        // })

        
    },
    //关闭
    // closewindow(){
    //     console.log('关闭')
    //     this.isclosewindow = true
    //     this.isopenwindow = false
    // },
    //判断方法=======
    //是否是数组
    // isArrayfunc(val){
    //     // console.log('是否是数组')
    //     // console.log(Array.isArray(val))
    //     return Array.isArray(val)
    // },
    // //是否是对象
    // isObjfunc(val){
    //     // console.log('是否是对象')
    //     // console.log(Object.prototype.toString.call(val) === '[object Object]')
    //     return Object.prototype.toString.call(val) === '[object Object]'
    // },
    // //一维数组转对象形成新数组
    // arrToobj(arr){
    //     var newarr = []
    //     for(var x=0;x<arr.length;x++){
    //         newarr.push({'key':x,'value':arr[x]})
    //     }
    //     // console.log('一维数组转对象形成新数组')
    //     // console.log(newarr)
    //     return newarr
    // },
    // //对象中多个键值对转数组
    // objToarr(obj){
    //     var newarr2 = []
    //     for(let index in obj){
    //         console.log(index)//key
    //         console.log(obj[index])//value
    //         newarr2.push({'key':index,'value':obj[index]})
    //     }
    //     // console.log('对象中多个键值对转数组')
    //     // console.log(newarr2)
    //     return newarr2
    // },
    // //判断对象中是否有某个key
    // ishavearr(obj,key){
    //     // console.log('判断对象中是否有某个key')
    //     // console.log(key in obj)
    //     return key in obj
    // },
    //选择标签
    choosetag(i,item){
        if(this.nowchoosetag == i.toString()){
            this.nowchoosetag = ''
            this.nowchoosetagitem = {}
        }else{
            this.nowchoosetag = i.toString()
            this.nowchoosetagitem = item
        }
        this.shuzi = ''
        this.pagenum = 1
        this.getlist()
        console.log(this.nowchoosetag)
    },
    //省市区确认
    queren: function(v) {
      	if (!v[0].code || !v[1].code ) {
      		vant.Toast('请完整选择省市');
      		return false
      	}
      	this.address_province = v[0].name
      	this.address_city = v[1].name
      	// this.address_district = v[2].name
      	this.shengshiqu = this.address_province + '  ' + this.address_city 
      	this.show2 = false
        this.pagenum = 1
        this.getlist()
      },
      //省市区取消
      quxiao: function() {
      	this.show2 = false
      },
      //初始缓存20条
        firststro(dataarr){
            this.setstor(dataarr,'number')
                            

            console.log(this.getstor('number'))
            

            var stor = []
            var stor = this.getstor('number').slice(0,20)
            var linarr = []
            for(var x=0;x<stor.length;x++){
                linarr.push(this.slicestr(stor[x]))
            }
            return linarr
        },
        //上一页
        prepage(){
            if(this.pagenum!=1){
                this.pagenum--
                //翻页
                this.changepagestor(this.pagenum)
            }
        },
        //下一页
        nextpage(){
            this.pagenum++
            this.changepagestor(this.pagenum)
        },
        //翻页
        changepagestor(nowpage){
            var stor = []
            var linarr = []

            var start = (nowpage*1-1)*20
            var end = (nowpage*1)*20

            stor = this.getstor('number').slice(start,end)
            console.log("读取缓存");
            console.log(stor);
            console.log(start,end);
            for(var x=0;x<stor.length;x++){
                linarr.push(this.slicestr(stor[x]))
            }
            this.numlist = linarr
        
        },
        shaixuanhao:function(shuzi){
            this.pagenum = 1
            this.nowchoosetag = ''
            this.nowchoosetagitem = {}
            //选号
            this.getlist()
        },
        //存
        setstor(item,name){
            localStorage.setItem(name, JSON.stringify(item));
        },
        //取
        getstor(name){
            return JSON.parse(localStorage.getItem(name))
        },
        //分割字符串为数组
        slicestr:function(num){
            console.log('要分割的内容')
            

            


            // var numarr = num.mobile.split(num.rule)

            var arr = []

            if(num.rule){
                var starti = num.mobile.lastIndexOf(num.rule)
                var endi = starti+num.rule.length

                console.log(starti,endi)
                arr[0] = num.mobile.slice(0,starti)
                arr[1] = num.mobile.slice(starti,endi)
                arr[2] = num.mobile.slice(endi,11)
            }else{
                arr[0] = num.mobile
                arr[1] = ''
                arr[2] = ''
            }
        
            
            num.mobile = arr



            return num
        },
        //数组转字符串
        joinarr:function(arr){
            // var arr = ["185", "6101", "9652"]
            var str = ''
            str = arr.join('')
            // console.log('数组转字符串')
            // console.log(str)
            return str
        },
        sortFun:function(arr, name, type){
            const compare = (prop) => {
            return function(obj1, obj2) {
                let val1 = obj1[prop];
                let val2 = obj2[prop];
                if (val1 < val2) {
                return -1;
                } else if (val1 > val2) {
                return 1;
                } else {
                return 0;
                }
            }
            }
            if (type == 'desc') {
            return arr.sort(compare(name));
            } else {
            return arr.sort(compare(name)).reverse();
            }
        },
        //不要四
        checkfoutboxChange(e){
            console.log(e)
            this.pagenum = 1
            this.getlist()
        },
  }
}
</script>
<style scoped>
.t_choosenumbox{
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    font-size: 14px;
    padding: 15px;
    border-bottom: 1px solid #e3e8f1;
    margin-bottom: 0.4rem;
}
.t_window_box{
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    position: fixed;
    top: 0;
    left: 100vw;
    background-color: rgba(0, 0, 0, 0);
    
}
.t_window_box_close{
    animation: closeanimate 0.3s forwards;
    -webkit-animation: closeanimate 0.3s forwards; /* Safari 与 Chrome */
}
.t_window_box_open{
    animation: openanimate 0.3s forwards;
    -webkit-animation: openanimate 0.3s forwards; /* Safari 与 Chrome */
}
.t_inner_box{
    /* position: absolute; */
    width: 100vw;
    /* height: 80vh; */
    /* left: 0; */
    /* bottom: 0; */
    /* background-color: white; */
    border-radius: 15px 15px 0 0;
    box-sizing: border-box;
    padding-bottom: 40px;
    
}
.t_num_list{
    display: flex;
    flex-wrap: wrap;
    padding: 4vw;
    box-sizing: border-box;
    justify-content: space-between;
    
    overflow: auto;
    
    
}
.t_num{
    background-color: white;
    width: 44vw;
    border-radius: 10px;
    font-size: 21px;
    padding: 10px;
    color: #232323;
    box-sizing: border-box;
    margin-bottom: 4vw;
    font-weight: bold;
    border: 1px solid #CFE1FF;

}
.t_num_lei{
    background-color: #0068FF;
    color: #FFFFFF;
}
.t_inner_top{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #cbcaca;
    box-sizing: border-box;
    padding: 4vw;
    align-items: center;
}
.t_change{
    color: #7A7A7A;
    font-size: 12px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
}
.t_tips{
    color: #A5A5A5;
    font-size: 12px;
    text-align: center;
}
/* 关闭动画 */
@keyframes closeanimate
{
    from {left: 0;}
    to {left: 100vw;}
}
 
@-webkit-keyframes closeanimate /* Safari 与 Chrome */
{
    from {left: 0;}
    to {left: 100vw;}
}
/* 打开动画 */
@keyframes openanimate
{
    from {left: 100vw;}
    to {left: 0;}
}
 
@-webkit-keyframes openanimate /* Safari 与 Chrome */
{
    from {left: 100vw;}
    to {left: 0;}
}
.t_changepage_box{
    display: flex;
    justify-content: space-around;
}
.t_changepage{
    font-size: 18px;
    color: white;
    background-color: #0068FF;
    border-radius: 6px;
    padding: 5px 22px;
}
.t_search_all{
    background-color: white;
    border-radius: 16px;
    padding: 14px 11px;
}
.t_search_box{
    background-color: #F0F5FD;
    display: flex;
    border-radius: 20px;
    position: relative;
}
.t_search_btn{
    color: white;
    background-color: #3C3C3C;
    font-size: 15px;
    border-radius: 15px;
    padding: 5px 15px;
    position: absolute;
    top: 5px;
    right: 5px;
}
/deep/ .t_search_box .el-input__inner{
    background-color: #F0F5FD !important;
    border: none !important;
    box-shadow: none !important;
}
.t_liang_box{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 20px;
}
.t_liang_tag{
    background-color: #3C3C3C;
    border-radius: 20px;
    color: white;
    width: 24%;
    margin-right: 1%;
    text-align: center;
    margin-bottom: 10px;
    font-size: 15px;
    padding: 6px 0;
}
.t_liang_tag_lei{
    background-color: #4779FA;
}
</style>